<template>
  <div class="container">
    <div class="content">
      <a-row style="margin: 0 -12px" >
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" style="height:630px">
            <!-- <a-range-picker
              disabled
              :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                        '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
              :defaultValue="[moment().startOf('month'), moment()]"
              :disabled-date="disabledDate" @change="formDateChange" style="width:240px;" 
            /> -->
            <a-select v-model="dateVal" style="width: 160px;" @change="dateChange">
              <a-select-option :value="1" >本月</a-select-option>
              <a-select-option :value="2" >上月</a-select-option>
            </a-select>
            <a-select v-model="keyWord" style="width: 160px;margin-left:10px;" @change="getData" clear>
              <a-select-option :value="item" v-for="(item,index) in accountList" :key="index" >
                {{item}}
              </a-select-option>
            </a-select>
            <div style="margin-top: 10px;">
              <a-row style="margin-top: 0" :gutter="[24, 24]">
                <a-col :sm="24" :md="12" :xl="8">
                  <a-card title="总制作数" size="small">
                    <countTo slot="extra" :startVal='0' :endVal='parseFloat((totalNum || 0))' :duration='800' :decimals="0"></countTo>
                  </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="8">
                  <a-card title="总中视频数" size="small">
                    <countTo slot="extra" :startVal='0' :endVal='parseFloat((totalQuality || 0))' :duration='800' :decimals="0"></countTo>
                  </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="8">
                  <a-card title="总达成金额" size="small">
                    <countTo slot="extra" :startVal='0' :endVal='parseFloat((totalPrice || 0))' :duration='800' :decimals="0"></countTo>
                  </a-card>
                </a-col>
              </a-row>
              <a-table
                :dataSource="list"
                :columns="columns"
                :pagination="{style: { marginBottom: 0 }, pageSize: 999999}"
                rowKey="id"
                size="small"
                :scroll="{y:400}"
                :loading="tableLoad"
              >
              </a-table>
            </div>
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" title="本月完成进度" style="height:630px;position: relative;">
            <a-progress :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" status="active" stroke-linecap="square" :percent="percent" type="circle" :width="320" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" >
              <template #format="">
                <span style="font-size: 30px;">{{ txtpercent.toFixed(2) }} %</span>
              </template>
            </a-progress>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {getDataList, getNames} from '@/api/shumei/shumei'
import moment from 'moment';
import countTo from 'vue-count-to';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: '10%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '产品',
    dataIndex: 'product',
    width: '10%',
    scopedSlots: { customRender: 'product' },
  },
  {
    title: '制作数',
    dataIndex: 'quantity',
    width: '10%',
    scopedSlots: { customRender: 'quantity' },
  },
  {
    title: '中视频数量',
    dataIndex: 'quality',
    width: '10%',
    scopedSlots: { customRender: 'quality' },
  },
  {
    title: '达成金额',
    dataIndex: 'price',
    width: '10%',
    scopedSlots: { customRender: 'price' },
  },
  // {
  //   title: '任务金额',
  //   dataIndex: 'monthTarget',
  //   width: '10%',
  //   scopedSlots: { customRender: 'monthTarget' },
  // },
  {
    title: '时间',
    dataIndex: 'date',
    width: '10%',
    scopedSlots: { customRender: 'date' },
  },
];

export default{
  data() {
    return {
      moment,
      loading: false,
      tableLoad: false,
      list: [],
      columns,
      start_date: moment().startOf('month').format("YYYY-MM-DD"),
      end_date: moment().format("YYYY-MM-DD"),
      dateVal:1,
      accountList:[],
      keyWord:'',
      canChart: true,
      percent:0,
      txtpercent: 0,
      totalNum:0,
      totalPrice:0,
      totalQuality:0
    }
  },
  created(){
    this.getNames()
  },
  mounted(){
  },
  methods:{
    getNames(){
      this.loading = true
      getNames({}).then((res) => {
        if(res.errcode == 0){
          this.accountList = res.data
          this.keyWord = res.data[0]
          this.getData()
        }
      }).catch(() => {
        this.loading = false
      });
    },
    getData(){
      let params = {
        filter_name: this.keyWord,
        start_date: this.start_date,
        end_date: this.end_date,
      }
      this.totalNum = 0,
      this.totalPrice = 0,
      this.totalQuality = 0
      this.tableLoad = true
      getDataList(params).then((res) => {
        this.loading = false
        this.tableLoad = false
        res.data.map(e=>e['quantity']).forEach(n=>this.totalNum+= parseFloat(n))
        res.data.map(e=>e['price']).forEach(n=>this.totalPrice+= parseFloat(n))
        res.data.map(e=>e['quality']).forEach(n=>this.totalQuality+= parseInt(n))
        if(res.errcode == 0){
          this.list = res.data
          this.setChart()
          this.canChart = false
        }
      }).catch(() => {
        this.loading = false
        this.tableLoad = false
      });
    },
    dateChange(val){
      if(val == 1){
        this.start_date = moment().startOf('month').format("YYYY-MM-DD")
        this.end_date = moment().format("YYYY-MM-DD")
      }else if(val == 2){
        this.start_date = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD');
        this.end_date = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
        // this.start_date = moment().startOf('month').add(-1, 'months').format("YYYY-MM-DD")
        // this.end_date = moment().endOf('month').add(-1, 'months').format("YYYY-MM-DD")
      }
      console.log(this.start_date, this.end_date)
      this.getData()
    },
    setChart(){
      let data = this.list
      let monthPrice = this.getMonthPrice(data, data[0])
      let totalPrice
      data.forEach(e=>{
        if(!totalPrice){totalPrice = e.monthTarget}
        if(totalPrice > e.monthTarget){
          totalPrice = e.monthTarget
        }
      })
      this.percent = monthPrice && monthPrice / totalPrice * 100;
      this.txtpercent = this.percent
      // console.log(this.percent)
    },
    getMonthPrice(data, item){
      // let todayX = moment().startOf('day').format('x') // 获取当前时间戳
      // let monthStartX = moment().startOf('month').format('x') // 获取当前月第一天0时0分0秒
      let todayX = moment(this.end_date).format('x')
      let monthStartX = moment(this.start_date).format('x')
      let arr = data.filter(e=> monthStartX <= moment(e.date).startOf('day').format('x') && moment(e.date).startOf('day').format('x') <= todayX && e.name == item.name)
      return this.arrToCount(arr, 'price')
    },
    arrToCount(arr, key){
      // 将arr运算为各个数据,key为数量或金额, 通用，有特殊的 函数内算
      let count = 0
      if(arr.length > 0){
        for(let item of arr){
          count += parseFloat(item[key]) 
        }
        return count
      }else{
        return 0
      }
    },
    formDateChange(e){
      if(e.length > 0){
        this.start_date = e[0].format("YYYY-MM-DD")
        this.end_date = e[1].format("YYYY-MM-DD")
      }else{
        this.start_date = ""
        this.end_date = ""
      }
      this.getData()
    },
    disabledDate(current){
      return current && current > moment().endOf('day');
    },
  },
  components:{countTo}
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  .content{
    width: 1300px;
    margin: 100px auto 0;
  }
}
</style>